$lightblue: #009FE3;
$error: #a94442;
$border: #ddd;

$tablet: 768px;
$large: 992px;


@media (min-width: $tablet) {
  .panel .panel-body {
    min-height : 22em;
  }
}
a {
  color : $lightblue;
}
.btn-primary {
  background-color : $lightblue;
}
body {
  padding-bottom: 2em;
}

iframe {
  width    : 100%;
  height   : 90px;
  border   : none;
  overflow : hidden;
}

groups {
  input {
    margin-bottom: 1em;
  }
  .create-btn {
    display: flex;
    .btn {
      flex-grow : 1;
      margin    : 0 .5em;
    }
  }
}

.container > .nav {
  margin-bottom: 2em;
}

.col-md-10 {
  margin-top: 1em;
  @media (min-width: $large) {
    margin-top: 0;
  }
}

section {
  .nav {
    background: $lightblue;
    @media (min-width: $large) {
      margin : 0 -15px;
      border : none;
    }
    border        : 1px solid rgb(221, 221, 221);
    border-radius : 5px;
    padding       : 1em 0;
    li a {
      border-radius : 0;
      color         : #fff;
    }
    li a:hover,
    li.active a:hover,
    li.active a {
      background  : $lightblue;
      font-weight : bold;
    }
  }
  .groups-title {
    margin-top    : 0;
    padding-top   : .1em;
    margin-bottom : 1em;
  }
}

.pagination > li > a {
  cursor  : pointer;
  padding : 6px 9px;
}
.pagination > .active > a {
  background: $lightblue;
}

// ANALYTICS
.analytics {
  hr {
    margin-top: 2em;
  }
  .stats-conf {
    margin: -.45em 0 0 1em;
  }
  .chosen-container {
    float: right
  }
  .chosen-single {
    margin-top : -.45em;
  }
}

// USER
.user {
  .password {
    height: 2.4em;
  }
  .chosen-container {
    width: 100% !important;
  }
  .ql-toolbar {
    border-radius: 4px 4px 0 0;
  }
  .ql-container {
    border-radius: 0 0 4px 4px;
  }
}

// MESSAGES
.user-messages {
  select {
    margin-bottom : 0.25em;
    margin-top    : -0.25em;
  }
}

.stats {
  .pull-right {
    margin-top : -.75em;
  }
  table {
    margin-top : 1em;
  }
}

// HOME
.home {
  .alerts {
    .alert {
      margin-bottom : 0;
      border-radius : 0;
      .glyphicon,
      a {
        color: white;
      }
      .manage {
        font-weight : bold;
      }
      .glyphicon {
        font-size : 2.7em;
        &:first-of-type {
          font-size   : 2.3em;
          margin-left : -.5em;
        }
      }
      &.alert-info {
        background-color : $lightblue;
        border-color     : $lightblue;
        padding          : 30px 15px;
        font-weight      : bold;
        a {
          font-size: 1.2em;
        }
      }
      &.alert-danger {
        background-color : #E40615;
        border-color     : #E40615;
      }
      &.alert-warning {
        background-color : #F29200;
        border-color     : #F29200;
      }
      &:first-child {
        border-top-left-radius  : 4px;
        border-top-right-radius : 4px;
      }
      &:last-child {
        border-bottom-left-radius  : 4px;
        border-bottom-right-radius : 4px;
      }
    }
  }
  .jumbotron {
    margin-top   : 2em;
    padding      : 24px;
    h1 {
      font-size  : 48px;
    }
    h1, p {
      text-align : center;
    }
    p {
      font-size: 17px;
    }
    dir-pagination-controls {
      display    : block;
      text-align : center;
    }
    table {
      table-layout : fixed;
      th, td {
        width         : 40%;
        overflow      : hidden;
        text-overflow : ellipsis;
        white-space   : nowrap;
        &:first-of-type {
          width    : 20%;
        }
      }
    }
  }
}

// ASIDE
.aside {
  @media (min-width: $large) {
    border-right: 2px solid $lightblue;
  }
  .alert-info {
    background-color : $lightblue;
    border-color     : $lightblue;
    a:not(.btn) {
      color          : white;
    }
  }
  .category {
    display: block;
    padding: .5em 0;
    &.active {
      font-weight: bold;
    }
  }
}

.filter-table {
  width: 25%;
}
.filter-table-reset {
  position : absolute;
  right    : 1.5em;
  top      : 0.7em;
  &:hover {
    cursor: pointer;
  }
}
.pending {
  font-style: italic;
}

.background {
  position        : absolute;
  top             : 0;
  bottom          : 0;
  left            : 0;
  right           : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : rgba(255,255,255,.65);
  z-index         : 100;
  .panel {
    width      : 40em;
    box-shadow : 0 0 5em rgba(0,0,0,.4);
  }
  .panel-body {
    min-height : 8em;
  }
  .close {
    margin-top   : -.4em;
    margin-right : -.4em;
  }
}

.users {
  @media (min-width: $large) {
    margin: 0 -15px;
  }
  em {
    color: #888;
  }
}

// STATS
@media (min-width: $large) {
  .chosen-container {
    width: 16em !important;
  }
  .stats-conf {
    float: right;
  }
}
.stats {
  .progress {
    width  : 10em;
    margin : 5em auto;
    height : 2em;
  }
  .progress-bar {
    border-radius    : 4px;
    background-color : $lightblue;
  }
  .alert {
    margin-top : 2em;
  }
}

// AREA
.area {
  position: relative;
  .loading {
    position    : absolute;
    top         : -15px;
    left        : -15px;
    right       : -15px;
    bottom      : -15px;
    background  : rgba(0,0,0,.3);
    z-index     : 1000;
    text-align  : center;
    font-size   : 200%;
    color       : #fff;
    line-height : 10em;
  }
  .map {
    height        : 650px;
    width         : calc(100% + 60px);
    position      : relative;
    border-radius : 5px 0 0 5px;
    margin        : -15px 0 -15px -30px;
    border        : none;
    border-right: 1px solid $border;
  }
  .ol-zoom {
    top    : auto;
    bottom : .5em;
  }
  .ol-dragbox {
    border-color: $lightblue;
  }
  .ol-control button {
    background: rgba(0, 139, 207, .5);
    &:hover {
      background: rgba(0, 159, 227, .8);
    }
  }
  .alert-info {
    text-align : center;
    margin: 15px -30px 15px;
    border-radius: 0 4px 0 0;
    border-width: 0 0 1px 0;
  }
  @media (min-width: $large) {
    .map {
      width : calc(100% + 30px);
    }
    .alert-info {
      margin-top: -15px;
    }
  }
  .attributions {
    position    : absolute;
    bottom      : 0;
    right       : 0;
    z-index     : 1;
    background  : rgba(255,255,255, 0.5);
    padding     : .25em 1em;
    font-size   : 11px;
    text-shadow : 0 0 1px #FFF;
    color       : #666;
  }
  .selection {
    position : absolute;
    top      : .5em;
    right    : .5em;
    z-index  : 1;
  }
  .search-container {
    position : absolute;
    top      : .5em;
    left     : .5em;
    z-index  : 1;
    width    : 15em;
  }
  .search-clear {
    position : absolute;
    right    : 0;
    top      : 0;
  }
  .pagination {
    margin: 10px 0 0;
  }
  .alternate {
    opacity: 75%;
    font-style: italic;
  }
}
.autocomplete-suggestions {
  border-radius: 4px;
  font-size: 13px;
}
.autocomplete-suggestion span {
  display     : inline-block;
  width       : 0.7em;
  text-align  : center;
  margin-left : -0.5em;
}

// DATE
date {
  display : flex;
  .input-group {
    width        : 16em;
    margin-right : 1em;
  }
  select {
    flex : 1;
  }
}

// LOGS
.logs {
  .reset {
    margin-top : -.75em;
  }
  .chosen-container {
    width : 8em !important;
    float : right
  }
  .chosen-drop {
    width : 21em;
  }
  .custom {
    width : 1em;
  }
  table {
    th, td {
      width: 27%;
      &:first-of-type {
        width: 19%;
      }
      select {
        max-width: 50%;
      }
      .input-group {
        max-width: 15em;
      }
      input {
        padding : 3px;
      }
    }
    select {
      width : auto;
    }
    date {
      select {
        max-width     : none;
        height        : 30px;
        line-height   : 30px;
        padding       : 5px 10px;
        font-size     : 12px;
        line-height   : 1.5;
        border-radius : 3px;
      }
    }
  }
  .header-filter > span {
    display     : inline-block;
    padding: .5em;
  }
}

.delete {
  opacity: .5;
}

.user-form,
.org-form {
  .required .col-sm-8:after {
    position: absolute;
    right: 0.35em;
    top: -0.4em;
    content: '*';
    color: $lightblue;
    opacity: .8;
    font-size: 200%;
    line-height: 1.4em;
  }
}

// CHOSEN
.chosen-container-multi .chosen-choices {
  border-radius : 4px;
  padding       : 2px 5px;
  li.search-choice {
    background : #f5f5f5;
    box-shadow : none;
  }
}
.chosen-container {
  * {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  }
  .chosen-drop {
    border-top    : 1px solid #aaa;
    border-radius : 4px;
    top           : calc(100% + 2px);
  }
  .chosen-single {
    background : white;
    padding    : 4px 0 4px 8px;
    height     : 33px;
    div b {
      background-position: 0 6px;
    }
  }
}
.chosen-container-active.chosen-with-drop .chosen-single {
  background : white;
  div b {
    background-position: -18px 6px;
  }
}

[flash-message] {
  position    : absolute;
  width       : 20em;
  left        : 50%;
  margin-left : -10em;
  top         : 1em;
  z-index     : 2000;
}

.glyphicon-spin {
  animation: spin 2s infinite linear;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

input.ng-invalid {
  border-color: $error;
}
